<template>
  <div :class="{ 'ly-is-full': isFull }" class="main">
    <div class="tableSelect" ref="tableSelect">
      <el-form
        :inline="true"
        :model="formInline"
        label-position="right"
        v-if="searchMoreType"
      >
        <el-row :gutter="26" type="flex">
          <el-col :span="26">
            <el-form-item label="市：" label-width="170" v-if="searchMoreType">
            <el-input
              v-model.trim="formInline.municipality"
              maxlength="60"
              clearable
              placeholder="市"
              style="width: 200px"
            ></el-input>
          </el-form-item>

          <el-form-item label="区：" label-width="170" v-if="searchMoreType">
            <el-input
              v-model.trim="formInline.region"
              maxlength="60"
              clearable
              placeholder="区"
              style="width: 200px"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="所属机构："
            label-width="170"
            v-if="searchMoreType"
          >
            <el-input
              v-model.trim="formInline.institution"
              maxlength="60"
              clearable
              placeholder="所属机构"
              style="width: 200px"
            ></el-input>
          </el-form-item>

          <el-form-item label="班级：" label-width="170" v-if="searchMoreType">
            <el-input
              v-model.trim="formInline.class"
              maxlength="60"
              clearable
              placeholder="班级"
              style="width: 200px"
            ></el-input>
          </el-form-item>

          <el-form-item label="科目：" label-width="170" v-if="searchMoreType">
            <el-input
              v-model.trim="formInline.subject"
              maxlength="60"
              clearable
              placeholder="科目"
              style="width: 200px"
            ></el-input>
          </el-form-item>

          <el-form-item label="课程：" label-width="170" v-if="searchMoreType">
            <el-input
              v-model.trim="formInline.course"
              maxlength="60"
              clearable
              placeholder="课程"
              style="width: 200px"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="课节次名称："
            label-width="170"
            v-if="searchMoreType"
          >
            <el-input
              v-model.trim="formInline.class_session_name"
              maxlength="60"
              clearable
              placeholder="课节次名称"
              style="width: 200px"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="上课时间："
            v-if="searchMoreType"
            label-width="170"
          >
            <el-input
              v-model.trim="formInline.class_time"
              maxlength="60"
              clearable
              placeholder="上课时间"
              style="width: 200px"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="上课时间段："
            v-if="searchMoreType"
            label-width="170"
          >
            <el-input
              v-model.trim="formInline.class_time_slot"
              maxlength="60"
              clearable
              placeholder="上课时间段"
              style="width: 200px"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="上课志愿者："
            v-if="searchMoreType"
            label-width="170"
          >
            <el-input
              v-model.trim="formInline.volunteer_name"
              maxlength="60"
              clearable
              placeholder="上课志愿者"
              style="width: 200px"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="志愿者考勤："
            v-if="searchMoreType"
            label-width="170"
          >
            <el-input
              v-model.trim="formInline.volunteer_lv"
              maxlength="60"
              clearable
              placeholder="志愿者考勤"
              style="width: 200px"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="在地教师："
            v-if="searchMoreType"
            label-width="170"
          >
            <el-input
              v-model.trim="formInline.local_teachers"
              maxlength="60"
              clearable
              placeholder="在地教师"
              style="width: 200px"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="在地教师考勤："
            v-if="searchMoreType"
            label-width="170"
          >
            <el-input
              v-model.trim="formInline.local_teachers_lv"
              maxlength="60"
              clearable
              placeholder="在地教师考勤"
              style="width: 200px"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="课节状态："
            v-if="searchMoreType"
            label-width="170"
          >
            <el-select
              v-model="formInline.class_session_status"
              placeholder="课节状态"
              style="width: 200px"
            >
              <el-option label="正常" value="1"></el-option>
              <el-option label="异常" value="2"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            label="异常原因："
            v-if="searchMoreType"
            label-width="170"
          >
            <el-input
              v-model.trim="formInline.abnormal_cause"
              maxlength="60"
              clearable
              placeholder="异常原因"
              style="width: 200px"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="课程会议链接："
            v-if="searchMoreType"
            label-width="170"
          >
            <el-input
              v-model.trim="formInline.link"
              maxlength="60"
              clearable
              placeholder="课程会议链接"
              style="width: 200px"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="课程会议号："
            v-if="searchMoreType"
            label-width="170"
          >
            <el-input
              v-model.trim="formInline.code"
              maxlength="60"
              clearable
              placeholder="课程会议号"
              style="width: 200px"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="督课人员："
            v-if="searchMoreType"
            label-width="170"
          >
            <el-input
              v-model.trim="formInline.staff_name"
              maxlength="60"
              clearable
              placeholder="督课人员"
              style="width: 200px"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="是否正常上课："
            v-if="searchMoreType"
            label-width="170"
          >
            <el-select
              v-model="formInline.status"
              placeholder="是否正常上课"
              style="width: 200px"
            >
              <el-option label="正常" value="1"></el-option>
              <el-option label="异常" value="2"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            label="志愿者是否正常入会："
            v-if="searchMoreType"
            label-width="170"
          >
            <el-select
              v-model="formInline.volunteer_status"
              placeholder="志愿者是否正常入会"
              style="width: 200px"
            >
              <el-option label="正常" value="1"></el-option>
              <el-option label="异常" value="2"></el-option>
            </el-select>
          </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form :model="formInline" label-position="right">
        <el-row :gutter="20" type="flex">
          <el-col :span="20">
            <el-form-item>
              <el-input
              v-model.trim="formInline.school_name"
              maxlength="60"
              clearable
              placeholder="学校名称"
              style="width: 200px"
            ></el-input>
              <el-button @click="search" type="primary" icon="Search"
                >查询</el-button
              >
              <el-button @click="handleEdit('', 'reset')" icon="Refresh"
                >重置</el-button
              >
              <!-- <el-button @click="addModule" type="primary">添加</el-button> -->
            </el-form-item>
          </el-col>

           <el-form-item prop="school_name">
            <el-button
              v-if="searchMoreType"
              @click="searchMore"
              type="primary"
              icon="Minus"
              style="margin-left: 20px"
              >收回查询</el-button
            >

            <el-button
              v-if="!searchMoreType"
              @click="searchMore"
              type="primary"
              icon="Aim"
              style="margin-left: 20px"
              >查询更多</el-button
            >
          </el-form-item>

          
        </el-row>
      </el-form>
    </div>

    <div class="table">
      <el-table
        :height="tableHeight"
        border
        :data="tableData"
        v-loading="loadingPage"
        style="width: 100%"
        ref="tableref"
        @selection-change="handleSelectionChange"
        row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <!--                <el-table-column type="selection" width="55"></el-table-column>-->
        <!-- <el-table-column type="selection" width="60" align="center"></el-table-column> -->
        <el-table-column type="index" width="60" align="center" label="序号">
          <template #default="scope">
            <span v-text="getIndex(scope.$index)"></span>
          </template>
        </el-table-column>
        <el-table-column
          min-width="100"
          prop="municipality"
          label="市"
        ></el-table-column>
        <el-table-column
          min-width="100"
          prop="region"
          label="区"
        ></el-table-column>
        <el-table-column
          min-width="200"
          prop="institution"
          label="所属机构"
        ></el-table-column>
        <el-table-column
          min-width="100"
          prop="school_name"
          label="学校名称"
        ></el-table-column>
        <el-table-column
          min-width="100"
          prop="school_id"
          label="学校id"
        ></el-table-column>
        <el-table-column
          min-width="100"
          prop="calss"
          label="班级"
        ></el-table-column>
        <el-table-column
          min-width="130"
          prop="subject"
          label="科目"
        ></el-table-column>
        <el-table-column
          min-width="200"
          prop="course"
          label="课程"
        ></el-table-column>
        <el-table-column
          min-width="100"
          prop="class_session_name"
          label="课节次名称"
        ></el-table-column>
        <el-table-column
          min-width="150"
          prop="calss_time"
          label="上课时间"
        ></el-table-column>
        <el-table-column
          min-width="150"
          prop="calss_time_slot"
          label="上课时间段"
        ></el-table-column>
        <el-table-column
          min-width="100"
          prop="volunteer_name"
          label="上课志愿者"
        ></el-table-column>
        <el-table-column
          min-width="100"
          prop="volunteer_lv"
          label="志愿者考勤"
        ></el-table-column>
        <el-table-column
          min-width="100"
          prop="local_teachers"
          label="在地教师"
        ></el-table-column>
        <el-table-column
          min-width="130"
          prop="local_teachers_lv"
          label="在地教师考勤"
        >
          <template #default="scope">
            <el-tag type="primary" v-if="scope.row.local_teachers_lv == '正常'"
              >正常</el-tag
            >
            <el-tag type="danger" v-else>异常</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          min-width="100"
          prop="class_session_status"
          label="课节状态"
        >
          <template #default="scope">
            <el-tag type="primary" v-if="scope.row.class_session_status == '1'"
              >正常</el-tag
            >
            <el-tag type="danger" v-else>异常</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          min-width="100"
          prop="abnormal_cause"
          label="异常原因"
        ></el-table-column>
        <el-table-column min-width="200" prop="link" label="课程会议链接">
          <template #default="scope">
            <a :href="scope.row.link" style="color: blue" target="_blank">{{
              scope.row.link
            }}</a>
          </template>
        </el-table-column>
        <el-table-column
          min-width="100"
          prop="code"
          label="课程会议号"
        ></el-table-column>
        <el-table-column
          min-width="100"
          prop="staff_name"
          label="督课人员"
        ></el-table-column>
        <el-table-column min-width="100" prop="status" label="是否正常上课">
          <template #default="scope">
            <el-tag type="primary" v-if="scope.row.status == '1'">正常</el-tag>
            <el-tag type="danger" v-else>异常</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          min-width="100"
          prop="volunteer_stauts"
          label="志愿者是否正常入会"
        >
          <template #default="scope">
            <el-tag type="primary" v-if="scope.row.volunteer_stauts == '1'"
              >正常</el-tag
            >
            <el-tag type="danger" v-else>异常</el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column min-width="100"  label="更新时间">
                    
                    <template #default="scope">
                        <span v-text="formatDateTime(tableData[scope.$index].updatetime)"></span>
                    </template> 
                </el-table-column> -->

        <!-- <el-table-column min-width="60" sortable prop="sort" label="排序"></el-table-column>
                <el-table-column min-width="80" prop="default_image" label="图标">
                    <template #default="scope">
                        <el-image  :src="scope.row.default_image" style="width: 30px;height:30px" :preview-src-list="[scope.row.default_image]" v-if="scope.row.default_image"></el-image>
                    </template>
                </el-table-column> -->
        <!--                <el-table-column min-width="100" label="状态" prop="status">-->
        <!--                    <template slot-scope="scope">-->
        <!--                        <el-tag v-if="scope.row.status" size="small">正常</el-tag>-->
        <!--                        <el-tag v-else type="danger" size="small">禁用</el-tag>-->
        <!--                    </template>-->
        <!--                </el-table-column>-->
        <!-- <el-table-column min-width="150" prop="createtime" label="创建时间"></el-table-column> -->
        <el-table-column fixed="right" label="操作" min-width="100">
          <template #header>
            <div
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
            >
              <div>操作</div>
              <div @click="setFull">
                <el-tooltip content="全屏" placement="bottom">
                  <el-icon><full-screen /></el-icon>
                </el-tooltip>
              </div>
            </div>
          </template>
          <template #default="scope">
            <!--                        <span class="table-operate-btn" @click="handleEdit(scope.row,'detail')" v-show="isShowBtn('viptypeManage','会员卡管理','Retrieve')">详情</span>-->
            <span
              class="table-operate-btn"
              @click="handleEdit(scope.row, 'edit')"
              >编辑</span
            >
            <!-- <span class="table-operate-btn" @click="handleEdit(scope.row, 'delete')">删除</span> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Pagination
      v-bind:child-msg="pageparm"
      @callFather="callFather"
    ></Pagination>
    <add-module-goods-type
      ref="addModuleFlag"
      @refreshData="refreshData"
      :type="type"
    ></add-module-goods-type>
  </div>
</template>
<script>
import Pagination from "@/components/Pagination.vue";
import { dateFormats } from "@/utils/util";
import {
  timetableOnlineList,
  timetableDel,
  adminGroup,
  timetableImport,
} from "@/api/api";
import XEUtils from "xe-utils";
import AddModuleGoodsType from "./components/add.vue";
import { lyMixins } from "@/mixins/mixins";
import dayjs from "dayjs";
import { ElMessage, ElMessageBox } from "element-plus";

export default {
  mixins: [lyMixins],
  components: {
    AddModuleGoodsType,
    Pagination,
  },
  name: "adminManage",
  data() {
    return {
      type: "",
      fileList: [],
      isFull: false,
      loadingPage: false,
      // 选项框选中数组
      ids: [],

      // 选项框非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      formInline: {
        page: 1,
        page: 1,
        per_page: 10,
        status: "",
        state: "",
        is_status: "",
      },
      pageparm: {
        page: 1,
        per_page: 10,
        total: 0,
      },
      statusList: [
        { id: 1, name: "正常" },
        { id: 0, name: "禁用" },
      ],
      timers: [],
      tableData: [],
      selectData: [],
      GroupList: [], //管理员分组列表
      searchMoreType: false,
      statusprops: [
        { id: 1, name: "待制定" },
        { id: 2, name: "已制定" },
      ],
      stateprops: [
        { id: 1, name: "待审核" },
        { id: 2, name: "已审核" },
      ],
      is_statusprops: [
        { id: 1, name: "未排课" },
        { id: 2, name: "已排课" },
      ],
    };
  },
  methods: {
    searchMore() {
      this.searchMoreType = !this.searchMoreType;
    },
    formatDateTime(time) {
      return dayjs.unix(time).format("YYYY-MM-DD HH:mm");
    },
    refreshData(x) {
      // 新增成功 搜索归0
      if (x) this.handleEdit("", "reset");
      else this.getData();
    },
    setFull() {
      this.isFull = !this.isFull;
      window.dispatchEvent(new Event("resize"));
    },
    // 表格序列号
    getIndex($index) {
      // (当前页 - 1) * 当前显示数据条数 + 当前行数据的索引 + 1
      return (this.pageparm.page - 1) * this.pageparm.per_page + $index + 1;
    },
    //多选项框被选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 批量删除按钮操作 */
    handleDelete(row) {
      const ids = this.ids;
      let vm = this;
      vm.$confirm("是否确认删除选中的数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(function () {
        return timetableDel({ id: ids }).then((res) => {
          if (res.code == 1) {
            ElMessage.success(res.msg);
            vm.search();
          } else {
            ElMessage.warning(res.msg);
          }
        });
      });
    },
    changeStatus(row) {
      console.log(row, "row----");
    },
    addModule() {
      this.type = "add";
      console.log(this.type, "---------新增出发");
      this.$refs.addModuleFlag.addModuleFn(null, "新增", this.GroupList);
    },
    handleEdit(row, flag) {
      if (flag == "detail") {
        this.$refs.addModuleFlag.addModuleFn(row, "详情", this.GroupList);
      } else if (flag == "edit") {
        this.type = "edit";
        this.$refs.addModuleFlag.addModuleFn(row, "编辑", this.GroupList);
      } else if (flag == "delete") {
        let vm = this;
        vm.$confirm("您确定要删除选中的数据吗？", {
          closeOnClickModal: false,
        })
          .then((res) => {
            timetableDel({ id: row.id }).then((res) => {
              if (res.code == 1) {
                ElMessage.success(res.msg);
                vm.search();
              } else {
                ElMessage.warning(res.msg);
              }
            });
          })
          .catch(() => {});
      } else if (flag == "reset") {
        this.formInline = {
          page: 1,
          per_page: 10,
        };
        this.pageparm = {
          page: 1,
          per_page: 10,
          total: 0,
        };
        this.getData();
      }
    },

    callFather(parm) {
      this.formInline.page = parm.page;
      this.formInline.per_page = parm.per_page;
      this.getData();
    },
    search(i, e) {
      this.formInline.page = 1;
      this.formInline.per_page = 10;
      console.log(i, e);
      if (i === 1)
        this.formInline.status = this.statusprops.find(
          (item) => item.name == e
        ).name;
      if (i === 2)
        this.formInline.state = this.stateprops.find(
          (item) => item.name == e
        ).name;
      if (i === 3)
        this.formInline.is_status = this.is_statusprops.find(
          (item) => item.name == e
        ).name;
      this.getData();
    },
    //获取列表
    async getData() {
      this.loadingPage = true;
      timetableOnlineList(this.formInline).then((res) => {
        this.loadingPage = false;
        if (res.code == 1) {
          this.tableData = res.data.data;
          // // 将列表数据转换为树形数据
          // this.tableData = XEUtils.toArrayTree(res.data.data, { parentKey: 'parent', strict: false })
          this.pageparm.page = res.data.current_page;
          this.pageparm.per_page = res.data.per_page;
          this.pageparm.total = res.data.total;
        }
      });
    },

    timeChange(val) {
      if (val) {
        this.formInline.beginAt = dateFormats(val[0], "yyyy-MM-dd hh:mm:ss");
        this.formInline.endAt = dateFormats(val[1], "yyyy-MM-dd hh:mm:ss");
      } else {
        this.formInline.beginAt = null;
        this.formInline.endAt = null;
      }
      this.search();
    },
    getGroupList() {
      // 管理员分组获取
      adminGroup().then((res) => {
        if (res.code == 1) {
          //console.log(res, "------------成功获取到管理员分组列表");
          this.GroupList = res.data;
        }
      });
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleSuccess(res, file) {
      if (res.code == 1) {
        timetableImport({ file: res.data.url }).then((res) => {
          if (res.code == 1) {
            this.getData();
            ElMessage.success(`导入成功`);
          }
        });
      }
    },
    handleExceed(files, fileList) {
      console.log(files, fileList);
      return;
      ElMessage.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 文件状态改变时
    handleChange(file) {
      // 结构获取文件名
      let { name } = file;
      // 正则校验文件格式
      let result = /^.xls|.png|.xlsx$/.test(
        // 截取文件名后缀 例：.zip
        // 注解：
        // substring() 截取字符串中介于两个指定下标之间的字符
        // toLowerCase()  将字符串转换为小写
        // lastIndexOf(".") 返回一个指定的字符串值最后出现的位置
        name.substring(name.lastIndexOf(".")).toLowerCase()
      );
      if (!result) {
        ElMessage.error("上传文件格式不符合要求");
        return;
      }
    },
  },
  created() {
    // 获取管理员分组
    this.getGroupList();
    // 数据获取
    this.getData();
  },
};
</script>

<style scoped>
html,
body {
  height: 100%;
}
.main {
  min-height: 1100px !important;
}
</style>